<template>
	<view>
		<view class="my-userinfo-container">
			<!-- 头像昵称区域 -->
			<view class="top-box">
				<image :src="userinfo.avatarUrl" class="avater"></image>
				<view class="nickName">{{userinfo.nickName}}</view>
			</view>
			
			<!-- 面板的列表区域 -->
			<view class="panel-list">
				<!-- 第一个面板 -->
				<view class="panel">
					<!-- panel整体区域 -->
					<view class="panel-body" >
						<!-- panel的item项 -->
						<view class="panel-item" v-for="(item,i) in panelListOne" :key="i">
							<text>{{item.number}}</text>
							<text>{{item.name}}</text>
						</view>
					
					</view>
				</view>
			
			<!-- 第二个节点 -->
			<view class="panel">
				<view class="panel-title">
					我的订单
				</view>
				<view class="panel-body">
					<view class="panel-item"  v-for="(item,i) in panelListTwo" :key="i">
						<image :src="item.icon" class="icon"></image>
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>
			<!-- 第三个节点 -->
			<view class="panel">
				<view class="panel-list-item">
					 <text>收货地址</text>
				    <uni-icons type="arrowright" size="15"></uni-icons>
				</view>
				<view class="panel-list-item">
					 <text>联系客服</text>
				    <uni-icons type="arrowright" size="15"></uni-icons>
				</view>
				<view class="panel-list-item" @click="logout">
					 <text>退出登录</text>
				    <uni-icons type="arrowright" size="15"></uni-icons>
				</view>
			</view>
			</view>
			
			
		</view>

	
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		name:"my-userinfo",
		data() {
			return {
				// 第一个面板数据
				panelListOne:[
					{
						number:8,
						name:"收藏的店铺"
					},
					{
						number:14,
						name:"收藏的商品"
					},
					{
						number:18,
						name:"关注的商品"
					},
					{
						number:84,
						name:"足迹"
					},
				],
				panelListTwo:[
					{
						icon:'/static/my-icons/icon1.png',
						name:"待付款"
					},
					{
						icon:'/static/my-icons/icon2.png',
						name:"待收货"
					},
					{
						icon:'/static/my-icons/icon3.png',
						name:"退款/退货"
					},
					{
						icon:'/static/my-icons/icon4.png',
						name:"全部订单"
					},
				]
			
			};
		},
		 methods:{
			 ...mapMutations('m_user',['updateUserInfo','updateToken','updateAddress']),
			async logout(){
				console.log('q')
				// 调用 uni.showModal来进行弹窗
				 const res = await uni.showModal({
				 	title:"提示",
					content:"确认退出登录吗？"
				 }).catch(err=>err)
				 console.log(res)
				if(res && res.confirm){
					// 用户确认了退出操作
					// 需要清空vuex中的userInfo， token， address
					this.updateUserInfo({})
					this.updateToken('')
					this.updateAddress({})
				
				}
			 }
		 },
		computed:{
			...mapState('m_user',['userinfo'])
		}
	}
</script>

<style lang="scss">
.my-userinfo-container{
	height: 100vh;
	// 为整个组件结构增加一个灰色背景
	background-color: #f4f4f4;
	.top-box{
		height: 400rpx;
		background-color: #c00000;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.avater{
			width: 90px;
			height: 90px;
			border-radius: 45px;
			border: 2px solid #fff;
			box-shadow: 0 1px 5px black;
		}
		.nickName{
			font-size: 16px;
			color: #fff;
			font-weight: 10px;
			margin-top: 10px;
		}
	}
}


.panel-list{
	padding: 0 10px;
	position: relative;
	top: -10px;
	.panel{
		background-color: white;
		border-radius: 3px;
		margin-bottom: 8px;
		.panel-title{
			line-height: 45px;
			padding-left: 10px;
			font-size: 15px;
			border-bottom: 1px solid #f4f4f4;
		}
		.panel-body{
			display: flex;
			justify-content: space-around;
			.panel-item{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				padding: 10px 0;
				
				.icon{
					width: 35px;
					height: 35px;
				}
			}
		}
		.panel-list-item{
			display: flex;
			
			justify-content: space-between;
			align-items: center;
			font-size: 15px;
			padding: 0 10px;
			line-height: 45px;
		}
	}
}

</style>